<template>
  <div id="">
    <headerbox :headerTitle="'银行卡解绑'" :hasBack='true'></headerbox>
    <ul class="banklist">
      <li v-for="cardItem in cardList" :key="cardItem.key" v-bind:style="{backgroundImage:'url('+imgUrlLink(cardItem.ballBankType.backGround)+')'}"
      @click="chooseBank(cardItem.id)">
        <img :src="imgUrlLink(cardItem.ballBankType.logo)" alt="">
        <div class="">
          <h3>{{cardItem.ballBankType.bankName}}</h3>
          <p>{{cardType(cardItem.cardNum)}}</p>
          {{cardItem.cardNum}}
        </div>
      </li>
    </ul>
    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import {userCardList,userCardUnbind} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    cardList:[],    //银行卡列表
    withdrawBank:false,   //是否从提现页面跳转
    token:'',
  }),
  components: {
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    ...mapMutations(['setBankStore']),
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    addBank() {
      this.$router.push({name:'addBank'});
    },
    // 判断银行卡类型：储蓄卡 or 信用卡(16位)
    cardType(idNum) {
      if(idNum.length==16) {
        return '信用卡'
      }else{
        return '储蓄卡'
      }
    },
    // 获取银行卡列表
    getCardList() {
      let self = this;
      userCardList({token:self.token}).then(res=>{
        console.log(res);
        if(res) {
          self.cardList = res.data.result;
        }
      })
    },
    // 点击对应银行卡，解绑
    chooseBank(cardId) {
      let self = this;
      self.messageBox.confirm('确定解绑该银行卡信息？').then(active=>{
        userCardUnbind({
          token:self.token,
          cardId:cardId
        }).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(-1);
          }
        })
      }).catch(error=>{
        console.log(error);
      })

    },
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.token = xlyd_loginInfo.token;
    this.getCardList();
    let withdrawBank = this.$route.params.withdrawBank;
    console.log(withdrawBank);
    this.withdrawBank = withdrawBank;
  }
}
</script>
<style lang="scss" scoped>
.banklist{
  padding: 15px;
  li{
    border-radius: 4px;
    padding: 20px 20px 40px;
    background: $blueColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    @include flex;
    align-items: flex-start;
    margin-bottom: 10px;
    img{
      width: 40px; height: 40px;
      border-radius: 100%;
    }
    div{
      @include flexcell;
      margin-left: 10px;
      line-height: 1.5em;
      p{
        font-size: 12px;
      }
    }
  }
}
</style>
